import React, { useState, useEffect } from 'react'
import { useRequest } from 'ahooks'
import { View } from '@tarojs/components'
import Taro, { useReachBottom, usePullDownRefresh } from '@tarojs/taro'
import { AtNoticebar } from 'taro-ui'
import { Swiper, SwiperItem, Image } from '@tarojs/components'
import { carousel, notice } from '../../api/carousel'
import { baseURL } from '../../utils/request'
import { OtherService } from '../../api/OtherService'
import styles from './index.module.less'
import BarkCard from '../../components/barkCard/index'

const Index: React.FC<{}> = () => {
  const [data, setData] = useState([])
  const [notices, setNotices] = useState([])
  // const [search, setSearch] = useState('')

  const carouselsRequest = useRequest(carousel, {
    manual: true,
    onSuccess: d => {
      /* @ts-ignore */
      setData(d)
    },
  })

  const noticesRequest = useRequest(notice, {
    manual: true,
    onSuccess: d => {
      /* @ts-ignore */
      setNotices(d)
    },
  })

  useEffect(() => {
    carouselsRequest.run()
    noticesRequest.run()
  }, [])

  const goToOutPage = (url) => {
    Taro.navigateTo({
      url: `/pages/outPage/index?url=${url}`,
    })
  }

  usePullDownRefresh(() => {
    setPage(1)
    setstate({ ...initState })
    carouselsRequest.refresh()
    noticesRequest.refresh()
    other.refresh()
  })
  const initState = { total: 0, data: [] }
  const [state, setstate] = useState(initState)
  const [page, setPage] = useState(1)
  const other = useRequest(OtherService.getBarks, {
    manual: true,
    onSuccess: (res) => {
      const { total, data } = res
      const dataTmp = [...state.data, ...data]
      // @ts-ignore
      setstate({ total, data: dataTmp })
    }
  })

  useReachBottom(() => {
    if (state.total === state.data.length) {
      Taro.showToast({
        title: "已全部加载",
        icon: 'none'
      })
      return
    }
    setPage(page + 1)
  })
  useEffect(() => {
    other.run(page)
  }, [page])

  return (
    <View className={styles.c}>
      {/* <AtSearchBar value={search} onChange={(e) => setSearch(e)} fixed={true} onActionClick={() => console.log(123)} /> */}
      <View style={{ paddingTop: '10px', width: '100%', paddingBottom: '20px' }}>
        <Swiper
          className={styles.swiper}
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay
          interval={3000}
        >
          {data && data.map(item => {
            return (
              <SwiperItem> {/* @ts-ignore */}
                <Image className={styles.img} src={`${baseURL}/${item.picture}`} onClick={() => goToOutPage(item.url)} />
              </SwiperItem>
            )
          })}
        </Swiper>
        <View className={styles.body} style={{ marginTop: '10PX' }}>
          <AtNoticebar icon='volume-plus' marquee={true} single={true} speed={50}>
            {notices && notices.map(item => {
              {/* @ts-ignore */ }
              return item.title
            }).join("。  ")}
          </AtNoticebar>
        </View>
        <BarkCard Barks={state.data} type="bark" />
      </View>

    </View>

  )
}

export default Index

